<template>
  <div class="app-container">
    <!-- 头部回退 -->
    <div class="top">
      <van-icon class="icon" name="arrow-left" @click="$router.go(-1)" />
      设置
    </div>

    <!-- 密码修改 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="oldpass"
          type="password"
          name="oldpass"
          label="旧密码"
          placeholder="旧密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="newpass"
          type="password"
          name="newpass"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          修改
        </van-button>
      </div>
    </van-form>
    <!-- 退出登录 -->
  </div>
</template>

<script lang='ts'>
import { showDialog, showNotify } from "vant";
import "vant/lib/index.css"; //样式不生效 加入此css样式

import { Options, Vue } from "vue-class-component";
@Options({
  components: {},
})
export default class changePass extends Vue {
  username = "";
  oldpass = "";
  newpass = "";
  onSubmit = (values: any) => {
    showDialog({
      message: "你想清楚在修改哦\n不然忘记密码管理员不会鸟你的",
      theme: "round-button",
    }).then(() => {
      if (this.oldpass !== this.newpass) {
        showNotify({ type: "danger", message: "密码不一致 请重新填写密码" });
        this.oldpass = "";
        this.newpass = "";
      } else {
        //TODO 发送修改密码的请求
      }
    });
  };
}
</script>

<style scoped lang='less'>
.app-container {
  .top {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    height: 70px;
    line-height: 70px;
    .icon {
      float: left;
      margin-top: 17px;
    }
  }
}
</style>